<template>
	<div class="xhy-autograph-box">
		<div class="autograph-box">
			<div class="inside">
				<van-icon class="icon-full" name="enlarge" color="#008cff" @click="fullScreenShow" />
				<canvas class="xhy-canvas" />
				<span @click="againSignature">重新签名</span>
			</div>
		</div>
		<van-popup v-model="isShowFull" @close="closeFull" :close-on-click-overlay="false" close-on-popstate
			safe-area-inset-bottom closeable close-icon-position="bottom-right" position="left"
			:style="{ height: '100%', width: '100%' }">
			<div class="popup-box">
				<canvas class="xhy-canvasFull" />
				<div class="panel-full">
					<van-button class="btn-again" type="info" @click="againFull">重新签名</van-button>
					<van-button class="btn-confirm" plain type="primary" @click="confirmFull">确认签名</van-button>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
import SignaturePad from 'signature_pad';
export default {
	name: "xhy-autograph",
	props: {
		config: {
			type: Object,
			default: {
				penColor: 'green', //笔刷颜色
				minWidth: 1 //最小宽度
			}
		}
	},
	data() {
		return {
			isShowFull: false, // 是否横屏显示
			signaturePad: null, // 存放竖屏SignaturePad对象
			signaturePadFull: null, // 存放横屏SignaturePad对象
			value: '',
			fullValue: ''
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			if (!this.signaturePad) {
				let canvas = document.querySelector('.xhy-canvas');
				this.signaturePad = new SignaturePad(canvas, this.config);
				this.signaturePad.onEnd = () => {
					this.$emit('receive', this.signaturePad.toDataURL()); //通知父组件改变。
				}
				canvas.height = document.body.clientHeight / 3;
				canvas.width = document.body.clientWidth - 30;
			}
		},
		initFull() {
			if (!this.signaturePadFull) {
				let canvas = document.querySelector('.xhy-canvasFull');
				this.signaturePadFull = new SignaturePad(canvas, this.config);
				canvas.height = document.body.clientHeight * 0.82;
				canvas.width = document.body.clientWidth;
			}
		},
		closeFull() {

		},
		againFull() {
			this.signaturePadFull.clear();
		},
		confirmFull() {
			try {
				let _flag = this.signaturePadFull.isEmpty();
				this.signaturePad.clear();
				if (!_flag) {
					this.fullValue = this.signaturePadFull.toDataURL();
					this.rotateBase64Img(this.fullValue, 270, res => {
						let _option = {
							width: document.body.clientWidth - 30,
							height: document.body.clientHeight / 3
						}
						this.signaturePad.fromDataURL(res, _option);
						this.$emit('receive', res); //通知父组件改变。
						this.isShowFull = false;
					})
				}
			} catch (error) {
				console.log(error);
				this.isShowFull = false;
			}
		},
		fullScreenShow() {
			this.isShowFull = true;
			setTimeout(() => {
				this.initFull();
				let _flag = this.signaturePad.isEmpty();
				this.signaturePadFull.clear();
				if (!_flag) {
					this.value = this.signaturePad.toDataURL();
					this.rotateBase64Img(this.value, 90, res => {
						let _option = {
							width: document.body.clientWidth,
							height: document.body.clientHeight * 0.82
						}
						this.signaturePadFull.fromDataURL(res, _option);
					})
				}
			}, 100)
		},
		againSignature() {
			this.signaturePad.clear();
			this.$emit('receive', ''); //通知父组件改变。
		},
		// base64图片旋转方法
		rotateBase64Img(src, edg, callback) {
			var canvas = document.createElement("canvas");
			var ctx = canvas.getContext("2d");
			var imgW; //图片宽度
			var imgH; //图片高度
			var size; //canvas初始大小
			if (edg % 90 != 0) {
				console.error("旋转角度必须是90的倍数!");
				throw '旋转角度必须是90的倍数!';
			}
			(edg < 0) && (edg = (edg % 360) + 360)
			const quadrant = (edg / 90) % 4; //旋转象限
			const cutCoor = {
				sx: 0,
				sy: 0,
				ex: 0,
				ey: 0
			}; //裁剪坐标
			var image = new Image();
			image.crossOrigin = "anonymous"
			image.src = src;
			image.onload = function () {
				imgW = image.width;
				imgH = image.height;
				size = imgW > imgH ? imgW : imgH;
				canvas.width = size * 2;
				canvas.height = size * 2;
				switch (quadrant) {
					case 0:
						cutCoor.sx = size;
						cutCoor.sy = size;
						cutCoor.ex = size + imgW;
						cutCoor.ey = size + imgH;
						break;
					case 1:
						cutCoor.sx = size - imgH;
						cutCoor.sy = size;
						cutCoor.ex = size;
						cutCoor.ey = size + imgW;
						break;
					case 2:
						cutCoor.sx = size - imgW;
						cutCoor.sy = size - imgH;
						cutCoor.ex = size;
						cutCoor.ey = size;
						break;
					case 3:
						cutCoor.sx = size;
						cutCoor.sy = size - imgW;
						cutCoor.ex = size + imgH;
						cutCoor.ey = size + imgW;
						break;
				}
				ctx.translate(size, size);
				ctx.rotate(edg * Math.PI / 180);
				ctx.drawImage(image, 0, 0);
				var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
				if (quadrant % 2 == 0) {
					canvas.width = imgW;
					canvas.height = imgH;
				} else {
					canvas.width = imgH;
					canvas.height = imgW;
				}
				ctx.putImageData(imgData, 0, 0);
				callback(canvas.toDataURL())
			};
		}
	}

}
</script>

<style lang="scss" scoped>

.xhy-autograph-box {
    @include wh(100%, auto);

    // .autograph-box {
    //     padding: 15px;
    //     width: 100%;
    //     height: auto;
    //     background-color: #fff;

    //     .inside {
    //         display: flex;
    //         position: relative;
    //         @include wh(100%, 100%);
    //         background-color: rgb(242, 242, 242);

    //         .icon-full {
    //             position: absolute;
    //             right: 0;
    //             top: 0;
    //             padding: 6px;
    //         }

    //         .xhy-canvas {}

    //         span {
    //             position: absolute;
    //             right: 0;
    //             bottom: 0;
    //             @include sc(12px, #008cff); // font-size  color
    //             padding: 6px;
    //         }
    //     }
    // }

    // .popup-box {
    //     @include wh(100%, 100%);
    //     background-color: rgb(242, 242, 242);

    //     .xhy-canvasFull {
    //         @include wh(100%, 82%);
    //         border-bottom: 1px solid #ccc;
    //     }

    //     .panel-full {
    //         @include wh(100%, 18%);
    //         position: relative;

    //         /deep/ .van-button {
    //             position: absolute;
    //             transform: rotate(90deg);
    //         }

    //         .btn-again {
    //             bottom: 40px;
    //             left: 66px;
    //         }

    //         .btn-confirm {
    //             bottom: 40px;
    //             left: 0px;
    //         }
    //     }
    // }
}


// .xhy-autograph-box {
//     @include wh(100%, auto);

//     .autograph-box {
//         padding: 15px;
//         width: 100%;
//         height: auto;
//         background-color: #fff;

//         .inside {
//             display: flex;
//             position: relative;
//             @include wh(100%, 100%);
//             background-color: rgb(242, 242, 242);

//             .icon-full {
//                 position: absolute;
//                 right: 0;
//                 top: 0;
//                 padding: 6px;
//             }

//             .xhy-canvas {}

//             span {
//                 position: absolute;
//                 right: 0;
//                 bottom: 0;
//                 @include sc(12px, #008cff); // font-size  color
//                 padding: 6px;
//             }
//         }
//     }

//     .popup-box {
//         @include wh(100%, 100%);
//         background-color: rgb(242, 242, 242);

//         .xhy-canvasFull {
//             @include wh(100%, 82%);
//             border-bottom: 1px solid #ccc;
//         }

//         .panel-full {
//             @include wh(100%, 18%);
//             position: relative;

//             /deep/ .van-button {
//                 position: absolute;
//                 transform: rotate(90deg);
//             }

//             .btn-again {
//                 bottom: 40px;
//                 left: 66px;
//             }

//             .btn-confirm {
//                 bottom: 40px;
//                 left: 0px;
//             }
//         }
//     }
// }
</style>

